<template>
	<div class="content">
		<!--工具简介-->
		<img class="login-front" src="@/assets/images/login-font.png" alt="" />

		<!--登录框-->
		<div class="form-box" v-if="operate === 'login'">
			<h2 class="title">欢迎登录</h2>

			<!--动态加载组件-->
			<component
				:is="loginMethod.active"
				@changeOperate="changeOperate"
				:phone="phone"
			></component>
		</div>

		<!--找回密码-->
		<div class="form-box" v-if="operate === 'forget'">
			<h2 class="title">找回密码</h2>

			<component :is="operate"></component>

			<!--切换至登录-->
			<p class="register-or-login">
				<a @click="operate = 'login'">切换至登录</a>
			</p>
		</div>
	</div>
</template>

<script>
import components from './components';

export default {
	components: components,
	data() {
		return {
			operate: 'login',
			loginMethod: {
				active: 'password',
				list: [
					{
						label: '密码登录',
						key: 'password',
						icon: 'icon-passwd'
					}
				]
			},
			phone: null
		};
	},
	created() {},
	methods: {
		// 切换操作
		changeOperate(operate) {
			this.operate = operate;
		},

		async next() {
			// 用户信息
			await this.$store.dispatch('userInfo');

			// 权限菜单
			const [first] = await this.$store.dispatch('permMenu');

			if (!first) {
				this.$message.error('该账号没有权限');
			} else {
				this.$nextTick(() => {
					this.$router.push('/home');
				});
			}
		}
	}
};
</script>

<style lang="stylus" scoped>
.content {
	height: 100vh;
	width: 100vw;
	position: relative;
	background: #fff;
	flexBox(center, center);
	.login-front {
		width: 768px;
		height: 484px;
		margin-right: 176px;
	}
	.form-box {
		width: 500px;
		.title {
			text-align: center;
			color: #FF3155;
			font-size: 48px;
			margin-bottom: 53px;
			font-weight: 500;
		}
		.register-or-login {
			color: #999999;
			text-align: center;
			margin-top: 20px;
			font-size: 20px;
		}
	}
}
</style>
